<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>AUI快速完成布局</title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
        <style type="text/css">
            body {
                background: #f0f0f0;
            }
            .bg-dark {
                background: #333333 !important;
            }
            .aui-bar-btn-item {
                background: #ffffff;
                border: none;
                border-bottom: 2px solid #ffffff;
            }
            .aui-bar-btn-item.aui-active {
                color: #039be5;
                background: #ffffff;
                border-bottom: 2px solid #039be5;
            }
            .nomore-tag {
                margin: 0 auto;
                text-align: center;
                width: auto;
                color: #333;
                padding: 20px 10px 10px 10px;
                font-size: 15px;
            }
            .title-bar {
                margin: 0 auto;
                text-align: left;
                width: auto;
                color: #333;
                padding: 3px 3px 2px 15px;
                font-size: 15px;
            }
            .aui-btn.aui-active {
                color: #fff !important;
                background-color: #039bf4 !important;
            }
            .aui-btn:active {
                color: #fff !important;
                background-color: #03bbff !important;
            }
            .aui-list .aui-list-item-start {
                -webkit-box-pack: start;
                -webkit-justify-content: flex-start;
                justify-content: flex-start;
            }
            .aui-btn-danger {
                background-color: #BC3603 !important;
            }
            .aui-btn-warning {
                background-color: #D97904 !important;
            }
            .aui-btn-default {
                color: #ffffff !important;
                background-color: #F2B705 !important;
            }
            .aui-btn-success {
                background-color: #86AD00 !important;
            }
            .aui-btn-primary {
                background-color: #0092B9 !important;
            }
        </style>
    </head>
    <body>
        <div id="pageWrapper" style="display: none">
            <div class="aui-content aui-margin-b-15">
                <ul class="aui-list aui-media-list">
                    <div>
                        <li class="aui-list-header" style="padding: 0.2rem; background-color: #f0f0f0;"></li>
                        <li class="aui-list-item" id="item_container" item_index="" tapmode>
                            <div class="aui-media-list-item-inner">
                                <div class="aui-list-item-media" style="width: 3.2rem;">
                                    <img id="company_icon" style="border-radius: 10px;" src="">
                                </div>
                                <div class="aui-list-item-inner">
                                    <div class="aui-list-item-text">
                                        <div id="loan_name" class="aui-list-item-title"></div>
                                        <div id="loan_stat" class="aui-list-item-right">
                                            参考月利率
                                        </div>
                                    </div>
                                    <div id="loan_limit" class="aui-list-item-text aui-padded-t-10 loan_list_text" style="width: 10rem;">
                                        贷款额度
                                    </div>
                                </div>
                            </div>
                            <div>
                                <li class="aui-list-header"  style="background-color: #f0fbff;">
                                    <img src="../../image/main_frm_1/coins.png" style="width: 0.6rem;" class="aui-img-round" />
                                    <span id="loan_desc" class="aui-margin-l-5">loan_desc</span>
                                </li>
                            </div>
                        </li>
                    </div>
                </ul>
            </div>
            <div class="aui-content">
                <ul class="aui-list aui-form-list">
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label" style="width:22%">
                                金额(元)：
                            </div>
                            <div class="aui-list-item-input" style="width:40%;">
                                <input id="loan_count" type="text" placeholder="请在此输入数字" value="">
                            </div>
                            <div id="loanRange" class="aui-list-item-label" style="width:38%; font-size:0.65rem; color:#aaa">
                                范围： 10000-50000
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div id="timeLimitLable" class="aui-list-item-label" style="width:22%">
                                期限(月)：
                            </div>
                            <div class="aui-list-item-input" style="width:40%;">
                                <input id="loan_period" type="text" placeholder="请在此输入数字" value="">
                            </div>
                            <div id="timeRange" class="aui-list-item-label" style="width:38%; font-size:0.65rem; color:#aaa">
                                范围： 12-36
                            </div>
                        </div>
                    </li>
                    <li id="monthPayType" class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div id="" class="aui-list-item-label" style="width:20%">
                                还款方式：
                            </div>
                            <div id="bar1" class="aui-list-item-btn aui-list-item-start" style="padding-right: 0.5rem;">
                                <div class="aui-btn aui-active" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.1rem" tapmode>
                                    等额本息
                                </div>
                                <div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
                                    等额本金
                                </div>
                                <div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
                                    先息后本
                                </div>

                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="aui-content">
                <div style="padding:0.5rem 2rem 0.5rem 2rem; background-color: #fff">
                    <div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" tapmode onclick="calcLoanRate()">
                        计算费率
                    </div>
                </div>
                <div id="calculation" style="background-color:#fff; padding-top:0.5rem">
                    <div style="margin-left:55%!important; width:45%; background-color:#fff; height: 10rem">
                        <h4 id="totalCost">总费用： 11200 元</h4>
                        <h4 id="monthCost">每月还款： 933.33 元</h4>
                        <p>
                            <div id="loanCost" class="aui-btn aui-btn-warning" style="margin-top:0.2rem; width: 7rem">
                                贷款 10000元
                            </div>
                        </p>
                        <p>
                            <div id="rateCost" class="aui-btn aui-btn-default" style="margin-top:0.2rem; width: 7rem">
                                利息 750元
                            </div>
                        </p>
                        <p>
                            <div id="procCost" class="aui-btn aui-btn-primary" style="margin-top:0.2rem; width: 7rem">
                                手续费 300元
                            </div>
                        </p>
                        <p>
                            <div id="otherCost" class="aui-btn aui-btn-success" style="margin-top:0.2rem; width: 7rem">
                                其他 50元
                            </div>
                        </p>
                    </div>
                    <div id="other_fee"style="width:100%; background-color:#fff; padding: 0rem 1rem 0.5rem 1rem">
                        <h6 id="otherPayDescription">其他费用： 管理费、GPS使用费等。费用收取情况各地有差异，具体与微贷网沟通。</h6>
                    </div>
                </div>
            </div>
            <div class="aui-content">
                <div class="title-bar">
                    办理流程
                </div>
                <div style="background-color:#fff; padding:0.5rem 1rem 0.3rem 1rem">
                    <div style="width:auto; background-color:#fff; height: auto">
                        <h4 id="applyProcedure">申请贷款-电话初审-开车到店-审核放款</h4>
                    </div>
                </div>
                <div style="padding:0rem 2rem 0.5rem 2rem; background-color: #fff">
                    <div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" onclick="openLoanStrategy()" tapmode>
                        详细攻略
                    </div>
                </div>
            </div>
            <div class="aui-content">
                <div class="title-bar">
                    申请条件
                </div>
                <div style="background-color:#fff; padding:0.5rem 1rem 0.5rem 1rem">
                    <div  style="width:auto; background-color:#fff; height: auto">
                        <h4 id="requirements"></h4>
                    </div>
                </div>
            </div>
            <div class="aui-content">
                <div class="title-bar">
                    所需材料
                </div>
                <div style="background-color:#fff; padding:0.5rem 1rem 0.5rem 1rem">
                    <div style="width:auto; background-color:#fff; height: auto">
                        <h4 id="materials">身份证、行驶证、驾驶证、车辆登记证书、车辆保单、车辆备用钥匙等</h4>
                    </div>
                </div>
            </div>
            <div class="aui-content">
                <div class="title-bar">
                    还款方式
                </div>
                <div style="background-color:#fff; padding:0.5rem 1rem 0.5rem 1rem">
                    <div style="width:auto; background-color:#fff; height: auto">
                        <h4 id="payType">按月还款</h4>
                    </div>
                </div>
            </div>
            <div class="aui-content">
                <div style="background-color:#fff; height:3.5rem"></div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="../../script/api.js" ></script>
    <script type="text/javascript" src="../../script/aui-tab.js" ></script>
    <script type="text/javascript" src="../../script/aui-toast.js" ></script>
    <script type="text/javascript" src="../../script/aui-dialog.js" ></script>
    <script>
        var toast = new auiToast();
        var dialog = new auiDialog();
        var pieID;
        var loanItemInfo;
        function openWinFrame(winName, options) {
            var delay = 0;
            if (api.systemType != 'ios') {
                delay = 300;
            }
            api.openWin({
                name : winName,
                url : './' + winName + '.html',
                bounces : false,
                delay : delay,
                slidBackEnabled : true,
                vScrollBarEnabled : false,
                animation : {
                    type : "movein", //动画类型（详见动画类型常量）
                    subType : "from_left", //动画子类型（详见动画子类型常量）
                    duration : delay //动画过渡时间，默认300毫秒
                },
                pageParam : options,
            });
        }

        function openLoanStrategy() {
            var options = {
                url : loanItemInfo.strategyUrl,
            };
            openWinFrame('loan_strategy_win', options);
        }

        function calcDefaultLoanRate() {
            var loanCount = loanItemInfo.loanFloorLimit;
            var loanPeriod = loanItemInfo.timeFloorLimit;
            var procCount = loanCount * loanItemInfo.oneTimeRate * 0.01;
            var otherCount = loanItemInfo.otherPay;
            var interest = 0;
            if (loanItemInfo.rateTypeIndex == 0) {
                interest = loanCount * loanPeriod * loanItemInfo.dayRate * 0.01;
            } else if (loanItemInfo.rateTypeIndex == 1) {
                interest = loanCount * loanPeriod * loanItemInfo.monthRate * 0.01;
            } else if (loanItemInfo.rateTypeIndex == 2) {
                interest = loanCount * loanPeriod * loanItemInfo.yearRate * 0.01 / 12;
            }
            var totalCount = loanCount + interest + procCount + otherCount;
            var monthCount = totalCount / loanPeriod;
            var totalCost = document.querySelector('#totalCost');
            totalCost.textContent = '总费用(举例) ' + totalCount + '元';
            var monthPayType = document.querySelector('#monthPayType');
            var monthCost = document.querySelector('#monthCost');
            monthCost.textContent = '每月还款 ' + monthCount.toFixed(2) + '元';
            if (loanItemInfo.rateTypeIndex == 0) {
                monthCost.style.display = "none";
                monthPayType.style.display = "none";
            }
            var loanCost = document.querySelector('#loanCost');
            loanCost.textContent = '贷款 ' + loanCount + '元';
            var rateCost = document.querySelector('#rateCost');
            rateCost.textContent = '利息 ' + interest.toFixed(2) + '元';
            var procCost = document.querySelector('#procCost');
            procCost.textContent = '一次性 ' + procCount.toFixed(2) + '元';
            var otherCost = document.querySelector('#otherCost');
            otherCost.textContent = '其他 ' + otherCount + '元';
            var pieChart = api.require('pieChart');
            pieChart.reloadData({
                id : pieID,
                elements : [{
                    value : loanCount,
                    color : '#D97904'
                }, {
                    value : interest,
                    color : '#F2B705'
                }, {
                    value : procCount,
                    color : '#0092B9'
                }, {
                    value : otherCount,
                    color : '#86AD00'
                }],
            }, function(ret, err) {
                if (ret) {
                    //alert(JSON.stringify(ret));
                } else {
                    //alert(JSON.stringify(err));
                }
            });
        }

        function calcLoanRate() {
            var loanCount = parseInt(document.getElementById("loan_count").value);
            var loanPeriod = parseInt(document.getElementById("loan_period").value);
            var procCount = loanCount * loanItemInfo.oneTimeRate * 0.01;
            var otherCount = loanItemInfo.otherPay;
            var interest = 0;
            if (isNaN(loanCount) || loanCount > loanItemInfo.loanUpperLimit || loanCount < loanItemInfo.loanFloorLimit) {
                alert('错误的贷款数额！请重新输入。。。');
                return;
            }
            if (isNaN(loanPeriod) || loanPeriod > loanItemInfo.timeUpperLimit || loanPeriod < loanItemInfo.timeFloorLimit) {
                alert('错误的贷款期限！请重新输入。。。');
                return;
            }
            if (loanItemInfo.rateTypeIndex == 0) {
                interest = loanCount * loanPeriod * loanItemInfo.dayRate * 0.01;
            } else if (loanItemInfo.rateTypeIndex == 1) {
                interest = loanCount * loanPeriod * loanItemInfo.monthRate * 0.01;
            } else if (loanItemInfo.rateTypeIndex == 2) {
                interest = loanCount * loanPeriod * loanItemInfo.yearRate * 0.01 / 12;
            }
            var totalCount = loanCount + interest + procCount + otherCount;
            var monthCount = totalCount / loanPeriod;
            var totalCost = document.querySelector('#totalCost');
            totalCost.textContent = '总费用 ' + totalCount + '元';
            var monthCost = document.querySelector('#monthCost');
            monthCost.textContent = '每月还款 ' + monthCount.toFixed(2) + '元';
            var loanCost = document.querySelector('#loanCost');
            loanCost.textContent = '贷款 ' + loanCount + '元';
            var rateCost = document.querySelector('#rateCost');
            rateCost.textContent = '利息 ' + interest.toFixed(2) + '元';
            var procCost = document.querySelector('#procCost');
            procCost.textContent = '一次性 ' + procCount.toFixed(2) + '元';
            var otherCost = document.querySelector('#otherCost');
            otherCost.textContent = '其他 ' + otherCount + '元';
            var pieChart = api.require('pieChart');
            pieChart.reloadData({
                id : pieID,
                elements : [{
                    value : loanCount,
                    color : '#D97904'
                }, {
                    value : interest,
                    color : '#F2B705'
                }, {
                    value : procCount,
                    color : '#0092B9'
                }, {
                    value : otherCount,
                    color : '#86AD00'
                }],
            }, function(ret, err) {
                if (ret) {
                    //alert(JSON.stringify(ret));
                } else {
                    //alert(JSON.stringify(err));
                }
            });
        }

        function loadLoanList(loanId) {
            //alert(loanId);
            var index = 0;
            var index_start = index;
            var end = index + 1;
            var loan_names = ["拍拍贷", "点融网", "你我贷", "中融投", "君融贷", "才米公社"];
            var loan_stats = [1.00, 1.13, 2.62, 0.78, 0.36, 0.72];
            var loan_limits = ["1万-5万", "1000-3000", "1万-2万", "5000-1万", "1万-3万", "1000-5000"];
            var loan_descs = ["10天快速放贷 仅需央行征信证明+身份证", "仅需身份证+芝麻信用，24小时快速放贷", '获政府认可金融平台 可投活期', '中国互联网金融协会常务理事单位', '永诚保险保障 注册再送100元微信红包', '花旗融资担保 资金独立保管'];
            var company_icons = ["paipai.jpg", "dianrong.jpg", "niwodai.jpg", "zhongrongtou.jpg", "junrongdai.jpg", "caimi.jpg"];
            var model = api.require('model');
            model.config({
                appId : 'A6928874653494',
                appKey : '4B6C428C-24C2-F9E7-3175-F983922E8C8F',
                host : 'https://d.apicloud.com'
            });
            toast.loading({
                title : "加载中",
                duration : 2000
            }, function(ret) {
                console.log(ret);
                setTimeout(function() {
                    toast.hide();
                }, 30000)
            });
            var query = api.require('query');
            var queryId = 0;
            var userId = "";
            query.createQuery(function(ret, err) {
                if (ret) {
                    queryId = ret.qid;
                    if (queryId) {
                        query.limit({
                            qid : queryId,
                            value : 1
                        });
                        query.whereEqual({
                            qid : queryId,
                            column : 'id',
                            value : loanId
                        });
                        model.findAll({
                            class : "loanItemRecord",
                            qid : queryId
                        }, function(ret, err) {
                            if (ret) {
                                //alert(JSON.stringify(ret));
                                toast.hide();
                                for (var i = 0; i < ret.length; i++) {
                                    loanItemInfo = ret[i];
                                    var icon = document.querySelector('#company_icon');
                                    icon.src = loanItemInfo.loanItemIconName;
                                    var loan_name = document.querySelector('#loan_name');
                                    loan_name.textContent = loanItemInfo.finInstName;
                                    var loan_stat = document.querySelector('#loan_stat');
                                    var timeLimitLable = document.querySelector('#timeLimitLable');
                                    if (loanItemInfo.rateTypeIndex == 0) {
                                        loan_stat.textContent = '参考日利率: ' + loanItemInfo.dayRate.toFixed(2) + '%';
                                        timeLimitLable.textContent = "期限(天)：";
                                    } else if (loanItemInfo.rateTypeIndex == 1) {
                                        loan_stat.textContent = '参考月利率: ' + loanItemInfo.monthRate.toFixed(2) + '%';
                                        timeLimitLable.textContent = "期限(月)：";
                                    } else {
                                        loan_stat.textContent = '参考年利率: ' + loanItemInfo.yearRate.toFixed(2) + '%';
                                        timeLimitLable.textContent = "期限(月)：";
                                    }
                                    var loan_limit = document.querySelector('#loan_limit');
                                    loan_limit.textContent = '可贷款额度: ' + loanItemInfo.loanFloorLimit + '-' + loanItemInfo.loanUpperLimit + '元';
                                    var loan_desc = document.querySelector('#loan_desc');
                                    loan_desc.innerHTML = loanItemInfo.loanItemDescription;
                                    var loanRange = document.querySelector('#loanRange');
                                    loanRange.textContent = "范围： " + loanItemInfo.loanFloorLimit + "-" + loanItemInfo.loanUpperLimit;
                                    var timeRange = document.querySelector('#timeRange');
                                    timeRange.textContent = "范围： " + loanItemInfo.timeFloorLimit + "-" + loanItemInfo.timeUpperLimit;
                                    var loan_name = document.querySelector('#loan_name');
                                    loan_name.textContent = loanItemInfo.finInstName;
                                    var otherPayDescription = document.querySelector('#otherPayDescription');
                                    otherPayDescription.textContent = loanItemInfo.otherPayDescription;
                                    var applyProcedure = document.querySelector('#applyProcedure');
                                    applyProcedure.textContent = loanItemInfo.applyProcedure;
                                    var materials = document.querySelector('#materials');
                                    materials.textContent = loanItemInfo.materials;
                                    var payType = document.querySelector('#payType');
                                    if (loanItemInfo.payTypeIndex == 0) {
                                        payType.textContent = "按月还款";
                                    } else if (loanItemInfo.payTypeIndex == 1) {
                                        payType.textContent = "随借随还";
                                    }
                                    var requirements = document.querySelector('#requirements');
                                    var strRequirements = loanItemInfo.requirements;
                                    strRequirements = strRequirements.split("<br>");
                                    //字符分割
                                    for ( i = 0; i < strRequirements.length; i++) {
                                        requirements.innerHTML += (strRequirements[i] + "<br/>");
                                        //分割后的字符输出
                                    }
                                }
                                calcDefaultLoanRate();
                                var options = {
                                    url : loanItemInfo.applyURL,
                                    loanId : loanItemInfo.id
                                };
                                api.openFrame({
                                    name : 'loan_register_btn',
                                    url : './loan_register_btn.html',
                                    bounces : false,
                                    rect : {
                                        x : 0,
                                        y : api.winHeight - 60,
                                        w : 'auto',
                                        h : 60
                                    },
                                    pageParam : options,
                                });
                                var wrapper = document.getElementById("pageWrapper");
                                wrapper.style.display = "block";
                                drawPieChart();
                            } else {
                                alert(JSON.stringify(err));
                            }
                        });
                    }
                } else {
                    alert(JSON.stringify(err));
                }
            });
        }

        function drawPieChart() {
            var pieChart = api.require('pieChart');
            var frameWidth = api.frameWidth;
            var calculation_h = $api.offset($api.byId('calculation')).t;
            pieChart.open({
                x : (frameWidth / 4) + (frameWidth / 32),
                y : calculation_h + (frameWidth / 4) + (frameWidth / 32),
                radius : frameWidth / 4,
                center : {
                    title : '费用',
                    subTitle : '分布图',
                    subTitleColor : '#000000',
                    titleSize : 11,
                    subTitleSize : 11
                },
                elements : [{
                    value : 10000,
                    color : '#D97904'
                }, {
                    value : 750,
                    color : '#F2B705'
                }, {
                    value : 300,
                    color : '#0092B9'
                }, {
                    value : 50,
                    color : '#86AD00'
                }],
                fixedOn : api.frameName,
                fixed : false
            }, function(ret, err) {
                if (ret) {
                    pieID = ret.id;
                    //alert(JSON.stringify(ret));
                } else {
                    //alert(JSON.stringify(err));
                }
            });
        }

        apiready = function() {
            api.setRefreshHeaderInfo({
                visible : true,
                bgColor : '#ccc',
                textColor : '#fff',
                textDown : '下拉刷新...',
                textUp : '松开刷新...',
                showTime : true
            }, function(ret, err) {
                api.refreshHeaderLoadDone();
            });
            var bar2 = document.querySelector("#bar1");
            if (bar2) {
                var tab = new auiTab({
                    element : bar2,
                    repeatClick : true
                }, function(ret) {
                    ;
                });
            }
            api.parseTapmode();
            loadLoanList(api.pageParam.loanId);
        }
    </script>
</html>